<!--
 * @FilePath: /vue-ts/src/views/login/index.vue
 * @Author: Yongchao Wang
 * @Date: 2020-09-14 21:00:20
 * @LastEditors: Yongchao Wang
 * @LastEditTime: 2020-09-16 22:10:30
-->
<template>
<a-row class="container">
  <a-col :span='12' :offset="6">
  <a-form :form="form"   @submit="handleSubmit" class="form">
    <div class="title-container">FateOfKing's Blog</div>
    <a-form-item >
      <a-input size='large'
        v-decorator="['username', { rules: [{ required: true, message: '请输入用户名' }] }]"
      >
       <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
      </a-input>
    </a-form-item>
    <a-form-item >
      <a-input type='password' size='large'
         v-decorator="['password', { rules: [{ required: true, message: '请输入密码' }] }]">
          <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
      </a-input>
    </a-form-item>
    <a-form-item  >
      <a-button size='large' type="primary" html-type="submit" style="width:100%;height: 40px;">
        登录
      </a-button>
    </a-form-item>
  </a-form>
  </a-col>
</a-row>
</template>

<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class Login extends Vue {
   form: any

   beforeCreate() {
     this.form = this.$form.createForm(this);
   }

   handleSubmit(e: Event) {
     e.preventDefault();
     this.form.validateFields((errors: Error[], values: any) => {
       if (!errors) {
         console.log(this.form.getFieldValue('username'));
         sessionStorage.setItem('token', 'token');
         this.$router.push({ path: '/' });
       }
     });
   }
}
</script>

<style scoped>
  .container{
    width: 100%;
    height: 100%;
    background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
      background-size: 100%;
  }
  .form{
    position: relative;
    width: 520px;
    max-width: 100%;
    padding: 160px 35px 0;
    margin: 0 auto;
    overflow: hidden;
  }
.title-container{
  height: 100px;
  line-height: 100px;
  font-size: 20px;
  font-weight: bold;
}
</style>
